<template>
    <el-dialog v-model="open" title="Clearance" width="78%" align="left"
        style="position: relative;background-color: #f1f1f1;" draggable>
        <div class="w100p flex" style="margin-bottom: 10px;">
            <p>Total Amount: {{ totalAmount? '$'+totalAmount: ''}}</p>
            <span class="ml-20">Declare Amount: {{ declareAmount? '$'+ declareAmount : ''}}</span>
        </div>
        <div class="w100p flex jc-sb aic mb-10">
            <el-select v-model="currencyType" class="m-2">
                <el-option v-for="item in currentList" :key="item" :label="item" :value="item" />
            </el-select>
            <div class="flex aic">
                <p>
                    <el-input v-model="clearMoney" class="button_width font" />
                </p>
                <p>
                    <el-button class="button_width font" @click="getnumber('Value', clearMoney)">Value</el-button>
                </p>
                <p class="rel">
                    <el-input v-model="percentage" @input="getnumber(percentage)" class="button_width font"></el-input>
                    <span class="abs" style="right:6px;top:20%">%</span>
                </p>
                <p>
                    <el-button class="button_width font" @click="getnumber('<500', 500)">{{ '<500' }} </el-button>
                </p>
                <p>
                    <el-button class="button_width font" @click="getnumber('<700', 700)">{{ '<700' }} </el-button>
                </p>
                <p>
                    <el-button class="button_width font" @click="getnumber('<800', 800)">{{ '<800' }} </el-button>
                </p>
            </div>
        </div>
        <div class="w100p  flex">
            <el-table :data="clearList" height="340" class="clearanceTable bs">
                <el-table-column fixed prop="product_name_pi" label="MODEL" width="200" />
                <el-table-column align="center" prop="product_name_pi" label="DESCRIPTION" width="200" />
                <el-table-column align="center" prop="price" label="True Price" width="200" />
                <el-table-column align="center" prop="quantity" label="QTY" width="200" />
                <el-table-column align="center" label="Declare Name" width="200">
                    <template v-slot="product_name_invoice">
                        <el-input v-model="product_name_invoice.row.product_name_pi" />
                    </template>
                </el-table-column>
                <el-table-column align="center" label="Declare Info" width="200">
                    <template v-slot="product_description_invoice">
                        <el-input v-model="product_description_invoice.row.product_name_pi" />
                    </template>
                </el-table-column>
                <el-table-column align="center" label="Declare Price" width="200">
                    <template v-slot="price">
                        <el-input
                            :value="isrelease === 0 ? price.row.price_declare_invoice : calculatePrice(totalAmount, price.row.price)" />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" style="border:1px solid #6193D2;color:#ffffff" @click="save">Save</el-button>
                <el-button style="border:1px solid #6193D2;background-color:#ffffff;color:#6193D2" @click="closeWindow">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script  setup>

import { ref } from 'vue'
const open = ref(false)
const currencyType = ref('USD')
const clearMoney = ref('')
const percentage = ref('')

const props = defineProps({
    isrelease: Number,
    declareAmount: Number,
    totalAmount: String,
    clearList: Object,
    currentList: Object,

})
const emits = defineEmits(['getnumber', 'ClearanceSave'])
// 计算价格
const calculatePrice = (totalAmount, price) => {
    let priced = props.declareAmount * price / totalAmount.replace(/,/g, '')
    return priced.toFixed(2)
}
const getnumber = (x, Number) => {
    emits('getnumber', x, Number)
}
const closeWindow = () => {
    open.value = false
}
const save = () => {
    emits('ClearanceSave')
}
const dialogopen = () => {
    open.value = true
}

defineExpose(
    {
        open,
        clearMoney,
        percentage,
        dialogopen,
        calculatePrice
    }
)
</script>
<style lang="less">
.clearanceTable {
    border-radius: 20px;
    border: 1px solid #E7E9EA;
}

.el-input__inner {
    font-family: swis;
}

.button_width {
    width: 80px;
}

.el-dialog__title {
    font-weight: bold;
}

.el-dialog__footer {
    margin-top: 10px;
}
.el-dialog__body{
        padding-top:5px;
    }
</style>